<markdown>
# 边框
</markdown>

<template>
  <x-table :columns="columns" :data="data" bordered>
    <template #fanju="{ row, index }">
      <x-tag size="medium">
        <x-a :href="row.src" target="blank">{{ row.fanju }}</x-a>
      </x-tag>
    </template>
    <template #tags="{ row, index }">
      <x-space>
        <x-tag v-for="tag in row.tags">{{ tag }}</x-tag>
      </x-space>
    </template>
    <template #总播放="{ row, index }">
      <x-tag size="medium">{{ row.总播放 }}</x-tag>
    </template>
  </x-table>
</template>

<script setup>
const columns = [
  { title: '番剧', key: 'fanju' },
  { title: '风格', key: 'tags' },
  { title: '评分', key: 'rate' },
  { title: '原作', key: '原作' },
  { title: '人物原案', key: '人物原案' },
  { title: '总播放', key: '总播放' },
  { title: '追番人数', key: '追番人数' },
  { title: '弹幕总数', key: '弹幕总数' }
]

const data = [
  {
    fanju: '关于我转生变成史莱姆这档事 第二季',
    src: 'https://www.bilibili.com/bangumi/play/ep409822',
    tags: ['小说改', '奇幻', '战斗', '魔法'],
    总播放: '6548.7万',
    rate: 9.1
  },
  {
    fanju: '魔女之旅',
    src: 'https://www.bilibili.com/bangumi/play/ss34412',
    tags: ['小说改', '魔法', '奇幻', '架空'],
    原作: 'GA NOVEL/SB Creative刊',
    人物原案: 'あずーる',
    总播放: '6548.7万',
    追番人数: '302.8万',
    弹幕总数: '95.6万',
    rate: 9.7
  },
  {
    fanju: '埃罗芒阿老师',
    src: 'https://www.bilibili.com/bangumi/play/ss5997',
    tags: ['小说改', '搞笑', '恋爱'],
    总播放: '6548.7万',
    rate: 9.2
  }
]
</script>
